<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>ajax和json综合</h1>
<!--
    获取好友列表
-->
<input type="button" value="响应数据是json字符串" onclick="method01()"> <br>
<hr>
<h3>好友列表</h3>
<!--存放查询好友的结果信息-->
<div id="messageDiv"></div>
<table width="500px" cellspacing="0px" cellpadding="5px" border="1px" id="myTable">
    <tr>
        <th>id</th>
        <th>name</th>
        <th>age</th>
    </tr>
    <!--<tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>-->

</table>

</body>
<!--导入axios库-->
<script type="text/javascript" src="js/axios-0.18.0.js"></script>
<script type="text/javascript">
    /*
      需求：向后台发送请求，获取好友列表并显示到页面中
      说明：后台的url地址： "http://localhost:8080/axiosJsonDemo01Servlet"
     */

     function method01() {
        //向后台发送请求
        axios.get("http://localhost:8080/axiosJsonDemo01Servlet")
             .then((resp)=>{
                //获取table标签的Table对象
                let objTable = document.getElementById("myTable");
                //1.定义变量接收后端响应的数据
                let obj = resp.data;
                //{flag: true, message: '查询好友列表成功', valueData: Array(3)}
                 //2.判断是否成功
                if(obj.flag){
                    //3.查询好友列表成功，将成功信息添加到标签<div id="messageDiv"></div>文本中
                    document.getElementById("messageDiv").innerHTML=obj.message;
                    //4.获取后台响应的存储数据的数组
                    let arr = obj.valueData;
                    //5.定义变量保存从数组中取出的每个json对象数据
                    let content = "";
                    //6.遍历数组
                    for (let person of arr) {//person={age:18,id:'001',name:'张三'}
                        //7.将从person对象中取出的每个人的信息放到每个tr的td文本中最后拼接到content
                        content = content + `<tr>
                                                <td>${person.id}</td>
                                                <td>${person.name}</td>
                                                <td>${person.age}</td>
                                             </tr>`;
                    }
                    //8.将content的内容放到table标签文本中，但是需要注意保留原来的表头 ===》 一定使用+=
                    objTable.innerHTML += content;
                }
             });
    }
</script>

</html>